import 'package:flutter/material.dart';
import '../../models/home_info_model.dart';
import '../../manger/cached_image_widget.dart';

typedef RechargeCallback = void Function(int subId);

typedef NewsCallback = void Function();

class HomeRechargeView extends StatelessWidget {
  final List<RechargeListModel> rechargeList;
  final RechargeCallback onSubItemTap;

  const HomeRechargeView({
    super.key,
    required this.rechargeList,
    required this.onSubItemTap
  });

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;

    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 15),
      padding: const EdgeInsets.only(top: 15),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            height: 50,  // 固定高度
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,  // 子元素在主轴方向上均匀分布
              children: List.generate(rechargeList.length >= 5 ? 5 : rechargeList.length, (index) {
                final item = rechargeList[index];  // 获取相应的数据
                return GestureDetector(
                  onTap: () => onSubItemTap(item.spuId  ),
                  child: CachedImage(
                    width: 50,  // 固定宽度为 50
                    height: 50,  // 固定高度为 50
                    imageUrl: item.pic,
                    fit: BoxFit.cover,
                    placeholderPath: 'assets/images/placeholderImage.png',  // 占位符图片路径 

                  ),
                );
              }),
            ),
          ),

          GestureDetector(
            child: Container(
              margin: const EdgeInsets.only(top: 15),
              padding: const EdgeInsets.symmetric(horizontal: 10),
              width: screenWidth - 30,
              height: 36,
              decoration: BoxDecoration(
                color: const Color(0xFFe5e5f7), 
                borderRadius: const BorderRadius.only(
                  bottomLeft: Radius.circular(12),
                  bottomRight: Radius.circular(12),
                ),
              ),
              child: Image.asset(
                'assets/images/payclass.png',
                width: screenWidth - 50,
                height: (screenWidth - 50) / 22,
                fit: BoxFit.contain,
              ),
            ),
          ),
        ],
      ),
    );
  }
}
